---
name: useSearch
route: /useSearch
menu: 'UI'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';

# useSearch

适用于常见的边输入，边异步搜索的场景。

**核心特性**

* 异步请求控制（loading, 请求时序控制等）
* 防抖
* 自动卸载

## 代码演示

### Select Search
<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Select Search' description='常见的 Select 异步搜索'>
  <Demo1 />
</JackBox>

### Input Search

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='Input Search' description='复杂的 Input 搜索场景，合理使用 deps'>
  <Demo2 />
</JackBox>

## API

```javascript
const result: Result = useSearch<T>(
  asyncFn: (value: any) => Promise<T>,
  options?: Options,
);

const result: Result = useSearch<T>(
  asyncFn: (value: any) => Promise<T>,
  deps?: any[],
  options?: Options,
);
```

### Result

| 参数     | 说明                                 | 类型                 |
|----------|--------------------------------------|----------------------|
| data     | 搜索结果数据                         | any                  |
| loading  | 是否正在加载                         | boolean              |
| onChange | 触发搜索的函数，参数会发送给 asyncFn | (value: any) => void |
| value    | onChange 的参数                      | -                    |
| cancel   | 取消进行中的请求和等待中的防抖       | () => void           |
| run      | 用当前 value 重新执行一次 asyncFn    | () => void           |

### 参数

| 参数    | 说明                                           | 类型                   | 默认值 |
|---------|------------------------------------------------|------------------------|--------|
| asyncFn | 异步请求数据函数，函数参数为 onChange 的 value | (value: any)=> Promise | -      |
| deps    | 依赖数组，如果 deps 变化，会触发 asyncFn       | any[]                  | []     |
| options | 可选配置项，见 Options                         | -                      | -      |


### Options

| 参数 | 说明         | 类型   | 默认值 |
|------|--------------|--------|--------|
| wait | 防抖时间间隔 | number | 300    |